/*html标签*/
<template> 
	<view class="page">
		<p class="welcome">欢迎使用~</p>
		<p class="register-title">用户注册</p>
		<view class="register-form">
			<view class="form-item">
				<view class="form-title">
					<span class="iconfont icon-shouji"></span>手机号
				</view>
				<!-- maxlength="11" 最大长度限制 -->
				<!-- v-model="" 双向绑定 -->
				<input type="text" placeholder="请输入手机号" maxlength="11" v-model="phoneNum" auto-focus/>
			</view>
			<view class="form-item">
				<view class="form-title">
					<span class="iconfont icon-mima"></span>密码
				</view>
				<input type="password" placeholder="请输入密码" maxlength="11" v-model="password"/>
			</view>
			<view class="form-item">
				<view class="form-title">
					<span class="iconfont icon-mima"></span>确认密码
				</view>
				<input type="password" placeholder="请确认密码" maxlength="11" v-model="confirmPassword"/>
			</view>
		</view>
		<!-- @click="" 点击 -->
		<view class="register-btn" @click="registerForm">
			注册
		</view>
	</view>
</template>
/*js代码*/
<script>
	export default {
		data() {
			return {
				phoneNum:'',
				password:'',
				confirmPassword:''
			}
		},
		methods: {
			// 提交注册
			registerForm(){
				// 组合数据
				let obj = {
					phoneNum:this.phoneNum,
					password:this.password
				}
				console.log(obj);
				// 判断输入是否为空
				if(!this.phoneNum.trim() || !this.password.trim() || !this.confirmPassword.trim()) {
					uni.showTabBar({
						title:"不能为空"
					})
					return
				}
				// 判断密码和确认密码是否一致
				if(this.password === this.confirmPassword) {
					// 提交数据
					uni.request({
						url:"http://8.140.198.52:8001/api/webapi/reguser",
						method:"POST",
						data:obj,
						success: (res) => {
							console.log(res,"注册返回数据");
							uni.showToast({
								title:"注册成功"
							})
							setTimeout(()=>{
								// 跳转到登录页面
								uni.navigateTo({
									url:"/pages/login/login"
								})
							},800)
						}
					})
				} else {
					uni.showToast({
						
						title:"密码不一致"
					})
				}
			}
		}
	}
</script>
<!-- 文件的样式css -->
<style lang="scss" scoped>
.page {
	background: linear-gradient(#b2cfed,#ffffff);
	width: 100%;
	height: 100vh;
	.welcome {
		font-size: 36rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		link-height: 40rpx;
		//background-color: pink;
		padding-left: 15rpx;
	}
	.register-title {
		font-size: 36rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		link-height: 40rpx;
		padding-left: 15rpx;
		margin:50rpx 0 50rpx 0;/*上右下左*/
	}
	.register-form {
		width: 85%;
		height: 500rpx;
		margin: 0 auto; //上下间距
		background-color: #ffffff;
		border-radius: 10rpx; //圆角
		padding: 20rpx; //内边框距离
		.form-item {
			height: 100rpx;
			margin: 40rpx 0 40rpx 0;
			.form-title {
				margin-bottom: 10rpx; //下间距
				.iconfont {
					color: #a7c5fb;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			input{
				padding-left: 5rpx; //内边框左间距
				border-bottom: 1px solid #e1e4ea; //底部边框
			}
		}
	}
	.register-btn {
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #a7c5fb;
		margin:  80rpx auto 0;
		border-radius: 40rpx;
		color: #ffffff;
	}
}

</style>
